<template>
  <div class="dynamic-info">
    <home-nav title="动态" :more="false"/>
    <ul class="content w-full">
      <li v-for="item in dynamicList" :key="item.id" class="mt-3 mb-2 ">
        <div class="flex">
          <div class="content-img w-10 h-10 mr-2">
            <img style="width: 100%;height: 100%" :src="item.user.avatarUrl" alt="">
          </div>
          <div class="content-info text-sm flex-1">
            <div class="title flex items-center w-full">
              <span class="text-sm yu-textColor-hover" @click="jumpHomePage(item.user.userId)">{{ item.user.nickname }}</span>
              <div class="w-3 h-3 ml-1 " v-show="item.user.avatarDetail?.identityIconUrl">
                <img style="width: 100%;height: 100%" :src="item.user.avatarDetail?.identityIconUrl" alt="">
              </div>
              <span class="text-sm ml-1 yu-titleColor">{{ shareType(item.type) }}</span>
            </div>
            <div class="time">
              {{ timestampToYMD(item.showTime) }}
            </div>
            <DynamicTyping :type="item.type" :json="item.json" :bottomActivityInfos="item.bottomActivityInfos" :pics="item.pics"/>
          </div>
        </div>
        <div class=" mt-4 border-b pb-4 ">
          <div class="flex items-center justify-end">
            <div :class="[item.info.liked ? 'yu-textColor-active' : '', 'yu-textColor-hover']"
                 @click="sendCommentLikeFn(item)">
              <van-icon name="like-o"/>
              <span v-show="item.info.likedCount">({{ item.info.likedCount }})</span>
            </div>
            <span class="mr-2 ml-2 yu-textColor-hover" @click="forwardingDynamicFn(item.id, item.json.msg)">
            转发
            <span v-show="item.info.shareCount ">({{ item.info.shareCount }})</span>
          </span>
            <div class="cursor-pointer yu-textColor-hover" @click="commentShowFn(item.id, item.info.threadId)">
              评论
              <span v-show="item.info.commentCount">({{ item.info.commentCount }})</span>
            </div>
            <span v-if="store.userInfo.userId === item.user.userId" class="ml-1 float-right cursor-pointer yu-textColor-hover" @click="delDynamic(item.id)">删除</span>
          </div>
          <CommentsShow v-if="isCommentId === item.id"/>
        </div>
      </li>
    </ul>
    <van-pagination
        class="van-pagination"
        v-if="userInfoHeader?.profile?.eventCount > params.limit && !identification"
        v-model="params.num"
        :page-count="userInfoHeader?.profile?.eventCount"
        mode="simple"
        @change="pageChange"
    />
    <!-- 分享弹窗 -->
    <share-popup
        ref="sharepopupExamples"
        :isShareSong="false"
        :sharePlayerInfo="transmitParams"
        isPopupTitle="转发"
        :isShareType="false"
    />
  </div>
</template>

<script setup>
import HomeNav from '@/components/HomeNav/index.vue'
import {getUserEvent, getEvent} from "@/api/radio/index"
import {useRoute, useRouter} from "vue-router";
import {reactive, ref, toRefs} from "vue";
import {useStore} from "@/store/index";
import {shareType, timestampToYMD} from '@/utils/index'
import CommentsShow from "./components/CommentsShow.vue";
import DynamicTyping from "./components/DynamicTyping.vue";

const route = useRoute()
const router = useRouter()
const store = useStore()
const data = reactive({
  params: {
    limit: 20, // 返回数据量
    num: 1,
    lasttime: -1 // 传入这个会返回下一页数据
  },
  lasttime: -1, // 传入这个会返回下一页数据(临时的)
  dynamicList: [], // 动态数据
  isCommentId: null, // 是否显示动态评论
  transmitParams: {} // 转发动态参数
})
const { params, dynamicList, isCommentId, transmitParams } = toRefs(data)
// 弹窗实例
const sharepopupExamples = ref()
// eventCount
// 请求数据
const getUserEventFn = () => {
  if (!props.identification) {
    // uid，limit lasttime
    getUserEvent({uid: route.query.id, ...data.params}).then(res => {
      const {code, events, lasttime} = res
      if (Number(code) === 200) {
        data.dynamicList = events.map(item => {
          return {...item, json: JSON.parse(item.json)}
        })
        // 请求下一页数据
        data.lasttime = lasttime
      }
    })
  } else {
    // 由于没有总共动态数量没办法做分页
    getEvent({ pagesize: 80, lasttime: data.params.lasttime }).then(res => {
      const {code, event, lasttime} = res
      if (Number(code) === 200) {
        data.dynamicList = event.map(item => {
          return {...item, json: JSON.parse(item.json)}
        })
        // 请求下一页数据
        data.lasttime = lasttime
      }
    })
  }

}
getUserEventFn()


// 分页改变时触发
const pageChange = (page) => {
  data.params.num = page
  data.params.lasttime = data.lasttime
  getUserEventFn()
}

// 点赞
const sendCommentLikeFn = (item) => {
  console.log(item)
  // 点赞
  store.getResourceLike({
    cid: item.id,
    t: item.info.liked ? 0 : 1,
    type: 6,
    threadId: item.info.threadId
  }).then(() => {
    // 重新请求数据
    getUserEventFn()
  })
}

// 删除动态
const delDynamic  = async (id) => {
  await store.setEventDel(id)
  getUserEventFn()
}

// 点击评论显示评论组件
const commentShowFn = (id, threadId) => {
  if (data.isCommentId === id) {
    data.isCommentId = null
    return
  }
  store.currentInfo.threadId = threadId
  store.currentInfo.type = 7
  // 显示的评论组件
  data.isCommentId = id
}
// 转发动态
const forwardingDynamicFn = (id, msg) => {
  data.transmitParams = {
    uid: route.query.id, // 用户id
    evId: id, // 转发动态id
    forwards: msg // 转发携带的msg
  }
// 打开分享弹窗
  sharepopupExamples.value.yuPopupA()
}

// 跳转到主页
const jumpHomePage = (id) => {
  router.push({
    path: '/user/homepage',
    query: {
      id
    }
  })
}

const props = defineProps({
  // 用户信息
  userInfoHeader: {
    type: Object,
    default: {}
  },
  // 用来识别是自己用户动态，还是朋友圈动态, 默认是用户动态
  identification: {
    type: Boolean,
    default: false
  }
})
</script>

<style scoped lang="scss">
:deep(.van-pagination) {

  .van-pagination__item--prev, .van-pagination__item--next {

  }

  .van-pagination__item--active {
    color: v-bind('store.theme.hoverTextColor') !important;
  }

  .van-pagination__item--page, .van-pagination__item--next, .van-pagination__item--prev {
    color: v-bind('store.theme.textColor');

    button {
      background-color: v-bind('store.theme.HoverBgColor');
    }
  }
}
</style>
